<template>
  <div>
    <!--头部-->
    <Header @scrollTitle="scrollTitle" :chooseValue=2></Header>
    <div class="jqgk" style="background:#fff5e0">
      <div class="contai" style="max-width:1197px">
        <div class="top_tit">
          <span
            class="titleFont"
            v-show="pcshow"
            style="letter-spacing:20px"
            id="headline"
            >Tourist Service Center</span
          >
          <span
            class="titleFont"
            v-show="!pcshow"
            style="font-size:20px"
            id="headline"
            >Tourist Service Center</span
          >
        </div>
        <el-col style="text-align: left">
          <!-- PC端 -->
          <div v-for="(item, index) in dataList" :key="item.key">
            <el-row
              v-if="pcshow "
              class="scenic_title"
              :style="choseValue == index ? styletable : mapStyle"
            >
              <el-col :span="12">
                <span>{{ item.title }}</span>
              </el-col> 

              <el-col :span="12" style="text-align: right">
                  <img
                    v-show="choseValue != index"
                    src="../assets/xqsimage/down.png"
                    style="width: 28px; height: 28px; margin-right: 27px"
                    @click="tabSelect(index)"
                  />
                </el-col>       
            </el-row>

            <el-row v-show="choseValue == index">
              <div style="height: 27px"></div>
              <a-spin :spinning="spinning" :delay="delayTime">
                <div v-for="items in item.details" :key="items.key">
                  <br />
                  <span class="scenic_span" v-if="items.type == 1">
                    {{ items.content }}
                  </span>
                  <br />
                  <img
                    v-if="items.type == 2"
                    :src="items.content"
                    style="width:100%"
                  />
                </div>
              </a-spin>
              <div style="height: 52px"></div>
            </el-row>
          </div>

          <!-- 手机端 -->
          <a-spin :spinning="spinning" :delay="delayTime">
            <div v-for="(item, index) in phoneDataList" :key="item.key" >
              <el-row
                v-if="!pcshow "
                class="road_title_mobile"
                :style="choseValue == index ? styletable : mapStyle"
              >
                <el-col :span="12">
                  <span style="font-size:10px">{{ item.title }}</span>
                </el-col>
                <el-col :span="12" style="text-align: right">
                  <img
                    v-show="choseValue != index"
                    src="../assets/xqsimage/down.png"
                    style="width: 28px; height: 28px; margin-right: 27px"
                    @click="tabSelect(index)"
                  />
                </el-col>
              </el-row>
              <el-row v-show="choseValue == index">
                <div style="height: 27px"></div>
                <div v-for="items in item.details" :key="items.key" style="padding-right:20px;padding-left:20px"> 
                  <span class="scenic_span" v-if="items.type == 1" style="font-size:14px">
                    {{ items.content }}
                  </span>
                  <img
                    v-if="items.type == 2"
                    :src="items.content"
                    style="width:100%"
                  />
                </div>
                <div style="height: 52px"></div>
              </el-row>
            </div>
          </a-spin>
        </el-col>
      </div>
    </div>
    <div style="height: 113px; background: #fff5e0"></div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./header";
import Footer from "./footer";
import { getServiceCenterList } from "../request/api";
export default {
  components: { Header, Footer },
  data() {
    return {
      pcshow: false,
      choseValue: 0,
      dataList: [],
      phoneDataList: [],
      styletable: { borderBottom: "8px solid #F2DCCA", paddingLeft: "0px" },
      mapStyle: {
        background: "#f2dcca",
        marginTop: "5px",
        paddingLeft: "39px"
      },
      spinning: true,
      delayTime: 500
    };
  },
  beforeCreate() {},
  created() {
    if (this._isMobile()) {
      this.pcshow = false;
    } else {
      this.pcshow = true;
    }
  },
  mounted() {
    if (this._isMobile()) {
      this.getMobileRoadListFunction();
    } else {
      this.getServiceCenterListFunction();
    }
  },
  methods: {
    //PC端文化获取
    getServiceCenterListFunction() {
      getServiceCenterList(this.HOST)
        .then(response => {
          this.spinning = true;
          this.dataList = response.data.map(function(currentValue) {
            currentValue.details = JSON.parse(currentValue.details);
            return currentValue;
          });
          this.spinning = false;
        })
        .catch(error => {});
    },
    //移动端
    getMobileRoadListFunction() {
      getServiceCenterList(this.HOST)
        .then(response => {
          this.spinning = true;
          this.phoneDataList = response.data.map(function(currentValue) {
            currentValue.details = JSON.parse(currentValue.details);
            return currentValue;
          });
          this.spinning = false;
        })
        .catch(error => {});
    },
    //菜单选择
    tabSelect(e) {
      let value = e;
      this.choseValue = value;
    },
    //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    //描点跳转
    scrollTitle() {
      var PageId = document.querySelector("#headline");
      window.scrollTo({
        top: PageId.offsetTop - 40,
        behavior: "smooth"
      });
    }
  }
};
</script>

<style>
.titleFont {
  font-size: 42px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #840207;
  line-height: 36px;
}

.titleFontSpan {
  font-size: 16px;
  font-family: "Adobe Heiti Std";
  font-weight: normal;
  color: #333333;
  line-height: 30px;
  text-indent: 2em;
}
.scenic_title {
  height: 103px;
  font-size: 28px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  line-height: 103px;
}
.road_title_mobile {
  font-size: 15px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  line-height: 50px;
}
.scenic_span {
  font-size: 16px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: #333333;
  line-height: 30px;
}
.scenic_span_top {
  font-size: 24px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: #333333;
  line-height: 30px;
}
</style>
